<template>
  <div class="big">
    <!-- 顶部轮播图区域 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/1.png" alt=""></van-swipe-item>
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/2.png" alt=""></van-swipe-item>
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/3.png" alt=""></van-swipe-item>
    </van-swipe>
    <!-- input定位区域 -->
    <div class="input">
      <div>
        <span class="icon"><van-icon name="arrow-down" /></span><van-icon name="search" />
        <input type="text" placeholder="请输入小区或地址">
      </div>
      <span class="gps"><van-icon name="location-o" /></span>
    </div>
    <!-- 租房组件区域 -->
    <div class="bigicon">
      <div class="little" @click="zhengzu">
       <img src="http://121.199.51.160/hkzf/img/1.56e3668a.png" alt="">
       <p>整租</p>
      </div>
      <div class="little">
       <img src="http://121.199.51.160/hkzf/img/2.5fbd9214.png" alt="">
       <p>合租</p>
      </div>
      <div class="little">
       <img src="http://121.199.51.160/hkzf/img/3.4fcfe89b.png" alt="">
       <p>地图找房</p>
      </div>
      <div class="little">
       <img src="http://121.199.51.160/hkzf/img/4.10b7441e.png" alt="">
       <p>去出租</p>
      </div>
    </div>
    <!-- 租房小组区域 -->
    <div class="zfxz">
      <span>租房小组</span>
      <span class="gengduo">更多</span>
    </div>
    <!--  -->
    <div class="body">
      <div class="top">
        <div class="little">
         <span><img src="http://121.199.51.160:8080/img/groups/1.png" alt=""></span>
         <p>家住回龙观归属的感觉</p>
        </div>
        <div class="little">
         <span><img src="http://121.199.51.160:8080/img/groups/2.png" alt=""></span>
         <p>宜居四五环大都市生活</p>
        </div>
      </div>
      <div class="top">
        <div class="little">
         <span><img src="http://121.199.51.160:8080/img/groups/3.png" alt=""></span>
         <p>喧哗三里屯繁花的背后</p>
        </div>
        <div class="little">
         <span><img src="http://121.199.51.160:8080/img/groups/4.png" alt=""></span>
         <p>比邻十号线地铁心连心</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShouYe',

  data () {
    return {
      list: {}
    }
  },
  async created () {
    const res = await this.$http.get('home/swiper')
    console.log(res)
    this.list = res.data.body
    console.log(this.list)
  },
  mounted () {

  },

  methods: {
    zhengzu () {
      this.$router.push('/show')
    }
  }
}
</script>

<style  scoped>

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    width: 250px;
    height: 200px;
  }
  img{
    width: 300;
    width: 400px;
  }
  .input{
    position: fixed;
    left: 0;
    top: 30px;
    width: 310px;
    height: 25px;
padding-left: 10px;
margin-left: 10px;
background-color: white;
border-radius: 3px;
padding-top: 2px;
  }
  input{
 border: none;
  }
  .icon{
    width: 20px;
    height: 20px;
    border-right: 1px solid #666;
    padding-right: 5px;
    margin-right: 5px;
    color: #666;
  }
  .gps{
    position: fixed;
    left: 340px;
    top: 32px;
    color: white;
  }
  .bigicon{
    display: flex;
    margin-top: 25px;
  }
  .bigicon img{
    width: 60px;
    height: 60px;

  }
  .bigicon .little{
    text-align: center;
    margin-left: 27px;
  }
  .zfxz{
    border-bottom: 1px solid #999;
width: 320px;
height: 50px;
line-height: 50px;
margin: 15px 25px 0 25px;
  }
  .gengduo{
    padding-left: 250px;
    position: fixed;
    top: 360px;
    right: 30px;
    color: #999;
  }
  .body .little{
    width: 160px;
    height: 50px;
    /* line-height: 20px; */
    font-size: 14px;
    display: flex;
    margin-right: 20px;
  }
  .body .little img{
width: 50px;
height: 50px;
margin:15px 20px 20px 20px;
  }
  .body .little p{
    padding-top: 8px;
    /* margin-right: 15px; */
  }
  .body .top{
    display: flex;
    margin-bottom: 20px;
  }
</style>
